<style type="text/css">
    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

    .driver-block1 {
        border: 15px solid rgb(240, 240, 240);
        margin-left: 100px;
        margin-top: 20px;
        border-radius: 4px;
    }
</style>
<template>
    <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110" style="width: 60%">
        <div class="driver-block1">
            <p style="color: white;font-size: 15px;font-weight: bold;text-align: center;padding: 10px 0;background: #2196F3;">车辆信息</p>
            <div style="padding:30px">
                <!--                <Form-item label="车牌号" prop="platenum">-->
                <!--                    <i-input v-model="formValidate.platenum" placeholder="请输入车牌号"></i-input>-->
                <!--                </Form-item>-->
                <Form-item label="车牌号" prop="carcode">
                    <i-input v-model="formValidate.carcode" placeholder="请输入车辆号"></i-input>
                </Form-item>
                <Form-item label="车辆卡编号" prop="cardid">
                    <i-input v-model="formValidate.cardid" placeholder="请输入车辆卡编号"></i-input>
                </Form-item>
                <Form-item label="车辆车架号" prop="carsn">
                    <i-input v-model="formValidate.carsn" placeholder="请输入车辆车架号(必填)"></i-input>
                </Form-item>
                <Form-item label="年审期限" prop="Checkdays">
                    <i-input v-model="formValidate.Checkdays" type="number" placeholder="请输入年审期限"></i-input>
                </Form-item>
                <Form-item label="上一次年审日期">
                    <Row>
                        <i-col span="11">
                            <Date-picker type="datetime" v-model="formValidate.Checkdate" placeholder="选择上一次年审日期" @on-change="changeStartDate"></Date-picker>
                        </i-col>
                    </Row>
                </Form-item>
                <Form-item label="车辆用途" prop="Cartype">
                    <i-select v-model="formValidate.Cartype" placeholder="请选择车辆用途">
                        <template v-for="(item,index) in carTypeArr">
                            <i-option :value="item">{{item}}</i-option>
                        </template>
                    </i-select>
                </Form-item>
                <Form-item label="车身颜色" prop="color">
                    <i-select v-model="formValidate.color" placeholder="请选择车身颜色">
                        <template v-for="(item,index) in colorArr">
                            <i-option :value="item">{{item}}</i-option>
                        </template>
                    </i-select>
                </Form-item>
                <Form-item label="车辆品牌" prop="brand">
                    <i-select v-model="formValidate.brand" placeholder="请选择车量品牌">
                        <template v-for="(item,index) in brandArr">
                            <i-option :value="item">{{item}}</i-option>
                        </template>
                    </i-select>
                </Form-item>
                <!--                <Form-item label="允许通行门区" prop="allowgates">-->
                <!--                    <i-select   placeholder="选择允许通行门区" multiple  :model.sync="formValidate.gates" filterable @on-change="checkChangeGate" >-->
                <!--                        <i-option  v-for="item in geteListArr" :value="item.Id">{{ item.Gatename }}</i-option>-->
                <!--                    </i-select>-->
                <!--                </Form-item>-->
                <template v-if="formValidate.Cartype != '自用'">
                    <Form-item label="车辆管理部门" prop="PartId">
                        <i-select v-model="formValidate.PartId" placeholder="请选择车辆管理部门">
                            <template v-for="(item,index) in carMgrDeptArr">
                                <i-option :value="item.Id">{{item.Title}}</i-option>
                            </template>
                        </i-select>
                    </Form-item>
                    <Form-item label="状态" prop="State">
                        <i-select v-model="formValidate.State" placeholder="请选择状态">
                                <i-option value="维修中">维修中</i-option>
                                <i-option value="训练中">训练中</i-option>
                        </i-select>
                    </Form-item>
                </template>

                <Form-item>
                    <i-button @click="handleSubmit('formValidate')" type="primary">提交</i-button>
                    <i-button @click="jumpPage('','CarPublicList')"  style="margin-left: 8px">返回</i-button>
                </Form-item>
            </div>
            <Modal v-model="isShowModal" title="下面列表选择单位" @on-ok=""
                   @on-cancel="isShowModal =false">
                <Tree :show-checkbox="showCheckbox"  :data="mainorgData" @on-select-change="mainOrgClickEvent"></Tree>
            </Modal>
            <Modal v-model="isShowModal2" title="下面列表选择部门" @on-ok=""
                   @on-cancel="isShowModal2 =false">
                <Tree :show-checkbox="showCheckbox"   :data="orgData" @on-select-change="orgClickEvent"></Tree>
            </Modal>
        </div>
    </i-form>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import baseUtil from '../../assets/utils/base-util';


    /**
     *  车牌号 platenum, 车辆卡编号 cardid，
     *  车辆自编号 carcode, 车辆车架号 carsn,
     *  车身颜色 color， 车辆品牌 brand
     *  参数: 行驶里程数 drivedmiles
     */


    export default {
        data() {
            return {
                formValidate: {
                    //添加字段
                    cardid: '',
                    PartId:'',
                    carcode: '',
                    carsn: '',
                    color: '',
                    brand: '',
                    Checkdays: '',
                    Cartype: '',
                    Checkdate: '',
                },
                colorArr: ['红', '橙', '黄', '绿', '青'],
                brandArr: ['大众', '奔驰', '宝马', '红旗'],
                ruleValidate: {},
                carMgrDeptArr: [],
                //门区
                geteListArr:[],
                //车两用途
                carTypeArr:['自用','公用','应急','作战','其它'],
                //某单位下部门
                orgArr: [],
                //单位名称、id
                TopTitle: '',
                TopId: '',
                //组织选择树形
                isShowModal2: false,
                orgData: [],
                //部门名称、id
                Partid: '',
                orgTitle: '',
                //单位选择树形
                showCheckbox: false,
                isShowModal: false,
                mainorgData: [],
                //详情
                carDetail:'',
            }
        },
        components: {},
        mounted: function () {
            this.GetCarMgrDeptList();
            this.getDetail();
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            //获取详情
            getDetail:function(){
                let that = this;

                let para = {
                    keyWords:that.$route.query.id,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.CarList, para, function (res) {
                    that.$Loading.finish();
                    that.carDetail = res.Msg.Arrays[0];

                    if(that.carDetail.Cartype != '自用'){
                        that.formValidate.PartId =that.carDetail.Partid;
                        that.formValidate.State =that.carDetail.State;
                    }

                    that.formValidate.cardid =that.carDetail.Cardid;
                    that.formValidate.carcode =that.carDetail.Carcode;
                    that.formValidate.carsn =that.carDetail.Carsn;
                    that.formValidate.color =that.carDetail.Color;
                    that.formValidate.brand =that.carDetail.Brand;
                    that.formValidate.Checkdays =that.carDetail.Checkdays;
                    that.formValidate.Cartype =that.carDetail.Cartype;
                    that.formValidate.Checkdate =that.carDetail.Checkdate;
                    that.formValidate.id =that.carDetail.Id;
                });

            },
            changeStartDate: function (date) {
                console.log(date);
                this.formValidate.Checkdate = date;
            },
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.addData(model);
                })
            },
            //选择门区
            checkChangeGate: function (data) {
                console.log('多选值:', data);
                let arr = Array.from(data);
                // this.formValidate.Gates =arr.join();
                this.formValidate.gates =arr;
                // console.log('checkChangeGate:', this.formValidate.Gates);
            },
            //添加
            addData: function (model) {
                let that = this;

                // model.Partid=that.Partid;
                model.OrgMgrDeptId=model.PartId;
                let params = that.$qs.stringify(model);
                this.$Loading.start();

                apiUtil.post(that, apiUtil.urls.EditCar, params, function (res) {
                    that.$Loading.finish();

                    that.$Notice.open({
                        title: '提示',
                        desc: '编辑成功'
                    });

                });
            },
            //车辆管理列表
            GetCarMgrDeptList: function (model) {
                let that = this;

                let params = that.$qs.stringify(model);
                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.CarMgrDeptList, params, function (res) {
                    that.$Loading.finish();
                    that.carMgrDeptArr = res.Msg;
                });
            },

            //打开选择单位模态框
            openUnitModel:function(){
                let that =this;
                that.getMainOrgData();
            },
            //打开选择部门模态框
            openOrgModel:function(){
                let that =this;
                if(this.TopId){
                    this.isShowModal2= true;
                }else {
                    that.$Notice.open({
                        title: '提示',
                        desc: '请添加单位过后再选择部门。'
                    });
                }
            },
            //选择单位
            mainOrgClickEvent: function (data) {
                console.log('单位数据:', data);
                this.TopId = data[0].id;
                this.TopTitle = data[0].title;
                this.getOrgArr(data[0].id);
            },
            //选择部门
            orgClickEvent: function (data) {
                console.log('部门数据:', data);
                this.Partid = data[0].id;
                this.orgTitle = data[0].title;
            },
            //获取单位数据
            getMainOrgData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetUnitList, params, function (res) {
                    that.$Loading.finish();
                    if(res.Msg.length == 0){
                        that.$Notice.open({
                            title: '提示',
                            desc: '系统中暂无单位信息，请在组织结构中进行添加。'
                        });
                    }else {
                        res.Msg.forEach(function (item,index) {
                            item.expand =true;
                        })

                        that.mainorgData = res.Msg;
                        that.isShowModal =true;

                        console.log('mainorgdata:',that.mainorgData);
                    }

                });
            },
            //获取指定单位下的部门
            getOrgArr: function (id) {
                let that = this;

                let para = {
                    parentId: id,
                };

                this.$Loading.start();
                that.formValidate.orgTitle = '';
                that.Partid = '';
                apiUtil.get(that, apiUtil.urls.GetDeptList, para, function (res) {
                    that.$Loading.finish();
                    if (res.Msg.length <= 0) {
                        that.formValidate.orgTitle = '';
                        that.Partid = '';
                        that.$Notice.open({
                            title: '提示',
                            desc: '前选择项无部门信息，请他先添加部门之后再进行添加或编辑。'
                        });
                    }
                    that.orgData = res.Msg;
                });
            },

        }
    }
</script>
